<template>
  <KView class="page-bg-header-view">
    <KView class="page-bg-header-view-img">
      <img :src="imgUrl" mode="widthFix">
    </KView>
    <KView class="page-bg-header-view-content">
      <KView class="page-bg-header-view-title">
        <KView>{{title}}</KView>
        <KView class="page-bg-header-view-back" @click="backClick">
          <sys-svg name="arrowLeft" color="#ffffff"></sys-svg>
        </KView>
      </KView>
      <KView class="page-bg-header-view-plane">
        <slot></slot>
      </KView>
    </KView>
  </KView>
</template>

<script>
  import SysSvg from 'common/sysSvg';

  export default {
    props: {
      title: {
        type: String,
        required: true
      },
      imgUrl: {
        type: String,
        required: true
      }
    },

    data() {
      return {};
    },

    methods: {
      backClick() {
        this.$emit('back-click');
      }
    },

    components: {
      SysSvg
    }
  };

</script>

<style lang="scss">
  .page-bg-header-view {
    height: 100%;
    position: relative;

    .page-bg-header-view-img {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      z-index: -1;

      >img {
        width: 100%;
      }
    }

    .page-bg-header-view-content {
      overflow: auto;

      @if $isMini {
        height: calc(100% - #{formatPx(15)});
      }

      @else {
        padding-top: formatPx(30);
        height: calc(100% - #{formatPx(45)});
      }

      .page-bg-header-view-title {
        padding: 0 formatPx(30);
        height: formatPx(60);
        line-height: formatPx(60);
        text-align: center;
        color: #ffffff;
        font-size: formatPx(36);
        position: relative;

        .page-bg-header-view-back {
          position: absolute;
          top: 0;
          left: formatPx(30);
          height: 100%;
          width: formatPx(40);
        }
      }

      .page-bg-header-view-plane {
        margin-top: formatPx(20);
        padding: formatPx(10) 0;
        height: calc(100% - #{formatPx(100)});
        overflow: auto;
      }
    }
  }

</style>
